<!-- 领取任务喵豆弹窗 -->
<template>
  <uni-popup
    ref="popup"
    :mask-click="false"
  >
    <div class="container">
      <!-- 恭喜信息 -->
      <div class="congratulation-info">
        <!-- 说明 -->
        <div class="statement">
          <div class="statement-text">
            您完成的活动
          </div>
          <div class="statement-text">
            尚有喵豆奖励未领取哦
          </div>
        </div>
        <!-- 喵豆图片 -->
        <image
          class="miaodou-img"
          :src="POPUP_MIAODOU_IMG"
        />
        <!-- 喵豆数量 -->
        <div class="miaodou-num">
          {{ miaodouStatus.availableReceiveMiaodou }}喵豆
        </div>
        <!-- 领取按钮 -->
        <div
          class="get-btn"
          @click="getTaskPrize"
        >
          领取并兑换
        </div>
        <!-- 补充说明 -->
        <div class="tip">
          注：可于个人中心-我的喵豆查看明细
        </div>
      </div>
    </div>
  </uni-popup>
</template>

<script lang="ts" setup>
import { POPUP_MIAODOU_IMG } from '@/static/constant/view-constant';
import { useUser } from '@/stores/user';
import { requestSubscribeMessage, showToast } from '@/utils/tools';

const userStore = useUser();
const { getTaskMiaodou, getInfo } = userStore;
const { miaodouStatus } = storeToRefs(userStore);

/** 当前组件实例 */
const currentInstance = getCurrentInstance();

/**
 * 领取登录奖励
 * @returns void
 * @description 点击「领取」按钮领取登录奖励，领取成功后关闭弹窗，领取失败弹出提示
 */
const getTaskPrize = async () => {
  // 请求订阅消息
  requestSubscribeMessage();

  const result = await getTaskMiaodou();
  console.log('领取登录奖励', result);
  if (result) {
    close();
    getInfo();
  } else {
    showToast('领取失败，请检查网络后重试');
  }
};

// #region 弹窗控制相关

/** 弹窗打开 */
const open = async () => {
  uni.hideTabBar();
  await getInfo();
  console.log('miaodouStatus', miaodouStatus);
  const popup: any = currentInstance?.refs.popup;
  popup?.open();
};

/** 弹窗关闭 */
const close = () => {
  const popup: any = currentInstance?.refs.popup;
  popup?.close();
  setTimeout(() => {
    uni.showTabBar();
  }, 300);
};

defineExpose({
  open,
  close,
});
// #endregion
</script>

<style lang="scss" scoped>
.container {
  position: relative;

  display: grid;
  grid-template:
    "congratulationInfo" 1fr
    "." 48px;
  row-gap: 20px;
  justify-items: center;

  // 边框装饰
  .border-decorate {
    position: absolute;
    top: -38.7179vw;
    left: 50%;
    z-index: -1;

    width: 62.5641vw;
    height: 62.5641vw;

    transform: translateX(-50%);

    // 背光
    .light {
      position: absolute;
      top: 0;
      left: 0;

      width: 100%;
      height: 100%;
    }

    .start {
      position: absolute;
      top: 50%;
      left: 50%;

      width: 43.5897vw;
      height: 32.5641vw;

      transform: translate(-50%, -50%);
    }

    // 礼物
    .gift-box {
      position: absolute;
      top: 50%;
      left: 50%;

      width: 34.8718vw;
      height: 34.1026vw;

      transform: translate(-50%, -50%);
    }
  }

  .congratulation-info {
    grid-area: congratulationInfo;

    width: calc(73.8462vw - 24px);

    background: linear-gradient(180deg, #faf1e2, #f5e0c9 100%);
    border: 1px solid #fff;
    border-radius: 16px;

    display: grid;

    // XXX 需要改成一列，但现在时间太紧，就暂时这样
    grid-template:
      ". ." 25px
      "statement statement" 56px
      ". ." 16px
      "miaodouImg miaodouImg" 128px
      "miaodouNum miaodouNum" 34px
      ". ." 19px
      "getBtn getBtn" auto
      ". ." 15px
      'tip tip' 24px
      / 1fr 1fr;
    justify-items: center;

    // 说明
    .statement {
      grid-area: statement;

      width: 53vw;
      height: 14.359vw;

      font-size: 5.1282vw;
      line-height: 6.5vw;
      color: #743920;
      text-align: center;
    }

    // 喵豆图片
    .miaodou-img {
      grid-area: miaodouImg;

      width: 32.0513vw;
      height: 32.8205vw;
    }

    // 喵豆数量
    .miaodou-num {
      grid-area: miaodouNum;

      height: 34px;

      font-size: 24px;
      font-weight: 500;
      line-height: 34px;
      color: #ec5f72;
      text-align: center;
    }

    // 领取按钮
    .get-btn {
      grid-area: getBtn;

      width: 53.3333vw;
      height: 12.3077vw;

      background: linear-gradient(103deg,
      #ff825e 0%,
      #ff6c87 100%,
      #f24ebd 100%);
      border-radius: 11.7949vw;

      font-size: 4.359vw;
      line-height: 12.3077vw;
      color: #fff;
      text-align: center;
    }

    // 补充说明
    .tip {
      grid-area: tip;

      font-size: 12px;
      line-height: 12px;
      color: rgb(0 0 0 / 40%);
    }
  }
}
</style>
